<template>
  <div class="nav-page">
    <div class="container-card">
      <div class="header">
        <h1 class="title">100个系统导航</h1>
        <p class="desc">选择一个类别，查看对应10个示例项目清单</p>
      </div>

      <div v-if="!selectedCategory" class="grid">
        <button v-for="cat in categories" :key="cat.id" class="grid-card" @click="onSelect(cat)">
          <div class="icon-wrap">
            <span class="icon">{{ cat.icon }}</span>
          </div>
          <div class="card-text">
            <div class="card-title">{{ cat.title }}</div>
            <div class="card-sub">点击查看示例项目</div>
          </div>
        </button>
      </div>

      <div v-else class="list-view">
        <div class="list-header">
          <div class="list-title">
            <!-- <span class="list-icon">{{ selectedCategory.icon }}</span> -->
            <span>{{ selectedCategory.displayTitle }}</span>
          </div>
          <button class="back-btn" @click="onBack">返回分类</button>
        </div>
        <ul class="list-items">
          <li v-for="(item, idx) in selectedCategory.items" :key="item" class="list-item"
            @click="onSelectItem(idx, item, selectedCategory.routes)">
            <span class="index">{{ idx + 1 }}.</span>
            <span class="text">{{ item }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

type Category = {
  id: number
  title: string
  displayTitle: string
  icon: string
  routes: string[]
  items: string[]
}

const categories = ref<Category[]>([
  {
    id: 1,
    title: '教育类系统',
    displayTitle: '🎓 教育类系统',
    icon: '🎓',
    routes: ['/examOnline', '/grades', '0', '0', '0', '0', '0', '0', '0', '0'],
    items: [
      '在线考试系统',
      '学生成绩管理系统',
      '教师教学管理系统',
      '在线课程学习平台（类似慕课）',
      '作业批改系统',
      '校园卡管理系统',
      '学生选课系统',
      '题库管理系统',
      '实验室预约系统',
      '课表排课系统',
    ],
  },
  {
    id: 2,
    title: '企业管理类',
    displayTitle: '💼 企业管理类',
    icon: '💼',
    routes: ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0'],
    items: [
      'OA办公系统',
      'CRM客户关系系统',
      'ERP进销存系统',
      '项目管理系统（类似Tapd、Jira）',
      '考勤打卡系统（含GPS定位）',
      '员工绩效管理系统',
      '报销审批系统',
      '公司内部知识库',
      '企业公告系统',
      '日程管理系统',
    ],
  },
  {
    id: 3,
    title: '电商类',
    displayTitle: '💰 电商类',
    icon: '🛒',
    routes: ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0'],
    items: [
      '商城系统（多端）',
      '秒杀系统',
      '拼团系统',
      '外卖点餐系统',
      '供应链管理系统',
      '会员积分系统',
      '商品评论系统',
      '购物车 + 订单管理',
      '物流跟踪系统',
      '支付系统（微信/支付宝接入）',
    ],
  },
  {
    id: 4,
    title: '财务类',
    displayTitle: '🧾 财务类',
    icon: '🧾',
    routes: ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0'],
    items: [
      '个人记账系统',
      '财务报表系统',
      '发票管理系统',
      '银行流水对账系统',
      '收支分析系统',
      '工资发放系统',
      '投资理财记录系统',
      '税务申报辅助系统',
      '预算管理系统',
      '财务审批流程系统',
    ],
  },
  {
    id: 5,
    title: '医疗类',
    displayTitle: '🏥 医疗类',
    icon: '🏥',
    routes: ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0'],
    items: [
      '医生预约挂号系统',
      '患者档案管理系统',
      '药品库存系统',
      '医院排班系统',
      '健康打卡系统',
      '在线问诊系统（文字/视频）',
      '医疗保险管理系统',
      '病历电子化系统',
      '健康报告生成系统',
      '疫苗预约系统',
    ],
  },
  {
    id: 6,
    title: '生活服务类',
    displayTitle: '🏠 生活服务类',
    icon: '🏠',
    routes: ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0'],
    items: [
      '家政预约系统',
      '租房系统',
      '二手交易系统',
      '停车场管理系统',
      '洗车预约系统',
      '社区报修系统',
      '外卖跑腿系统',
      '快递代收系统',
      '家庭账本',
      '宠物寄养管理系统',
    ],
  },
  {
    id: 7,
    title: '社交类',
    displayTitle: '📱 社交类',
    icon: '📱',
    routes: ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0'],
    items: [
      '微社区论坛',
      '聊天系统（WebSocket）',
      '博客系统',
      '动态朋友圈系统',
      '视频分享平台',
      '评论与点赞系统',
      '用户关注系统',
      '实时通知中心',
      '活动报名系统',
      '兴趣小组系统',
    ],
  },
  {
    id: 8,
    title: '政务/公共服务类',
    displayTitle: '🏢 政务/公共服务类',
    icon: '🏢',
    routes: ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0'],
    items: [
      '政务公告系统',
      '办事预约系统',
      '信访投诉系统',
      '政务公开管理系统',
      '城市志愿者系统',
      '公文流转系统',
      '公共图书馆管理系统',
      '环保举报系统',
      '政务问卷调查系统',
      '证照申请系统',
    ],
  },
  {
    id: 9,
    title: '健身/运动类',
    displayTitle: '🏋️ 健身/运动类',
    icon: '🏋️',
    routes: ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0'],
    items: [
      '健身房会员系统',
      '健身课程预约系统',
      '打卡计步系统',
      '饮食打卡系统',
      '私教管理系统',
      '健康目标跟踪',
      '体测数据分析系统',
      '比赛报名系统',
      '健身社交圈',
      '训练计划生成系统',
    ],
  },
  {
    id: 10,
    title: 'AI / 工具类',
    displayTitle: '🧠 AI / 工具类',
    icon: '🧠',
    routes: ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0'],
    items: [
      'AI写作平台（调用 OpenAI）',
      'OCR文字识别系统',
      '智能客服系统',
      '图像识别系统',
      '语音识别系统',
      '智能问答系统',
      'PDF文档分析系统',
      '知识图谱系统',
      '智能表单生成器',
      '自动代码生成平台（脚手架）',
    ],
  },
])

const selectedCategory = ref<Category | null>(null)
const router = useRouter()

function onSelect(cat: Category) {
  selectedCategory.value = cat
}

function onSelectItem(idx: number, item: string, routes: string[]) {
  const target = routes?.[idx]
  if (target && target !== '0') {
    router.push(target)
  } else {
    ElMessage({ type: 'info', message: '系统正在开发中' })
  }
}

function onBack() {
  selectedCategory.value = null
}
</script>

<style scoped>
.nav-page {
  /* 背景铺满屏幕 */
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
  background: #f5f7fb;
  /* 居中显示内部容器 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.container-card {
  max-width: 1060px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(31, 45, 61, 0.06);
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 100px;
  padding-right: 100px;
}

.header {
  margin-bottom: 16px;
}

.title {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
}

.desc {
  margin-top: 6px;
  color: #6b7280;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.grid-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.grid-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(31, 45, 61, 0.08);
  border-color: #d1d5db;
}

.icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e0f2fe, #f3e8ff);
}

.icon {
  font-size: 24px;
}

.card-text {
  display: flex;
  flex-direction: column;
}

.card-title {
  font-weight: 600;
  color: #111827;
}

.card-sub {
  font-size: 12px;
  color: #6b7280;
}

.list-view {
  margin-top: 8px;
}

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.list-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 18px;
  color: #1f2937;
}

.list-icon {
  font-size: 20px;
}

.back-btn {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  color: #374151;
  cursor: pointer;
}

.back-btn:hover {
  background: #f9fafb;
}

.list-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #fafafa;
}

.index {
  font-weight: 600;
  color: #4b5563;
}

.text {
  color: #1f2937;
}

@media (max-width: 720px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
</style>
